<!--
 * @Description: 菜单栏组件
-->
<template>
  <el-menu
    :default-active="activeIndex"
    class="_ehl_nav_menu"
    mode="horizontal"
    @select="handleSelect"
  >
    <template v-for="item in menu">
      <el-menu-item v-if="noChild(item)" :index="item[value_p]" :key="item[value_p]">{{
        item[label_p]
      }}</el-menu-item>
      <el-submenu :index="item[value_p]" :key="item[value_p]" v-else>
        <template slot="title">{{ item[label_p] }}</template>
        <el-menu-item
          v-for="item2 in item[children_p]"
          :index="item2[value_p]"
          :key="item2[value_p]"
          >{{ item2[label_p] }}
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>
<script>
  import Vue from 'vue'
  import { Menu, Submenu, MenuItem } from 'element-ui'
  Vue.use(Menu)
  Vue.use(Submenu)
  Vue.use(MenuItem)

  export default {
    props: {
      activeIndex: { type: String, default: () => '' },
      menu: {
        type: Array,
        default: () => [
          { label: 'label1', value: 'value1', children: null },
          {
            label: 'label2',
            value: 'value2',
            children: [
              { label: 'label21', value: 'value21' },
              { label: 'label22', value: 'value22', children: undefined },
            ],
          },
        ],
      },
      prop: {
        type: Object,
        default: () => ({ label: 'label', value: 'value', children: 'children' }),
      },
    },
    data() {
      return {
        label_p: this.prop['label'],
        value_p: this.prop['value'],
        children_p: this.prop['children'],
      }
    },
    methods: {
      noChild(item) {
        return (
          item === null ||
          item === undefined ||
          item[this.children_p] === null ||
          item[this.children_p] === undefined
        )
      },
      handleSelect(key, keyPath) {
        this.$emit('click', key, keyPath)
      },
    },
  }
</script>
